<!-- 
  json文件的解析11
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>json文件的解析</title>
  <link rel="stylesheet" href="./css/read.css">
</head>

<body>
  <div class="main-wrap">
    <h1>点击上传json文件或者拖拽文件</h1>
    <button id="upload" class="upload">点击上传文件</button>
    <input id="files" type="file">
    <div id="drag_test" class="drag_area">或把json文件拖拽到此处</div>
    <div class="read_content">
      <div class="title">对导出的json文件解析</div>
      <h1 class="zz-name"></h1>
      <h3>组内任务统计</h3>
      <div class="task_num">
        <div id="left" class="left"></div>
        <div id="right" class="right"></div>
      </div>
      <button class="copy" data-clipboard-target="#left">复制项目名</button>
      <button class="copy" data-clipboard-target="#right">复制项目数量</button>
      <h3>组员任务统计</h3>
      <div class="task_info" id="member">
        <!-- <div class="item">
        <div class="name">张三</div>
        <p></p>
      </div> -->
      </div>
      <button class="copy" data-clipboard-target="#member">复制组员任务统计</button>
    </div>


  </div>

  <script src="./js/jquery-1.8.3.min.js"></script>
  <script src="./js/layer/layer.js"></script>
  <script src="./js/clipboard.min.js"></script>
  <script>
    var reader = new FileReader();
    var clipboard = new ClipboardJS('.copy');
    clipboard.on('success', function (e) {
      // console.info('Action:', e.action);
      // console.info('Text:', e.text);
      // console.info('Trigger:', e.trigger);
      e.clearSelection();
      layer.msg('复制成功')
    });
    clipboard.on('error', function (e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
      layer.msg('复制失败')
    });

    // div拖拽
    //获取div对象
    const dragWrapper = document.getElementById("drag_test");
    //添加拖拽事件监听器
    dragWrapper.addEventListener("drop", (e) => {
      //阻止默认行为
      e.preventDefault();
      // 获取文件列表对象
      var files = e.target.files || e.dataTransfer.files;
      if (files && files.length > 0) {
        //读取文件内容
        reader.readAsText(files[0]); //读取文件的内容
        $('.drag_area').text(files[0].name)
        reader.onload = function () {
          // console.log("读取结果转为JSON：");
          let json = JSON.parse(this.result);
          // console.log(json);
          get_json(json);
        };

      }
    })

    //阻止拖拽结束事件默认行为
    dragWrapper.addEventListener("dragover", (e) => {
      e.preventDefault();
    })
    // div拖拽

    // 文件上传按钮
    $('#upload').click(function () {
      $('#files').click();
    })
    var inputElement = document.getElementById("files");
    inputElement.addEventListener("change", handleFiles, false);

    function handleFiles() {
      var selectedFile = document.getElementById("files").files[0]; //获取读取的File对象
      var name = selectedFile.name; //读取选中文件的文件名
      var size = selectedFile.size; //读取选中文件的大小
      console.log("文件名:" + name + "大小：" + size);
      console.log('selectedFile', selectedFile);
      // var reader = new FileReader(); //这里是核心！！！读取操作就是由它完成的。
      reader.readAsText(selectedFile); //读取文件的内容
      $('.upload').text('点击上传文件('+name+')')
      reader.onload = function () {
        // console.log("读取结果转为JSON：");
        let json = JSON.parse(this.result);
        // console.log(json);
        get_json(json);
      }
    }



    function get_json(data) {
      create_task_num(data.task)
      create_task_info(data.member)
      $('.zz-name').text(data.zz_name + '组')
      $('.read_content').show()
      // return false;
      // $.get("./json/zsx_2022_01_14.json", function (data, status) {
      //   create_task_num(data.task)
      //   create_task_info(data.member)
      //   $('.zz-name').text(data.zz_name + '组')
      // });
    }

    function create_task_num(data) {
      // console.log('data', data);
      let list1 = '';
      let list2 = '';
      data.forEach((e, i) => {
        list1 += `<div>${e.name}</div>`;
        list2 += `<div>${e.num}</div>`;
      });
      $('.task_num .left').empty().append(list1)
      $('.task_num .right').empty().append(list2)
    }

    function create_task_info(data) {
      // console.log('data', data);
      let list = '';
      data.forEach((e, i) => {
        let ctx = e.content;
        list += `
        <div class="item">
          <div class="name">${e.name}</div>
          <p>
            ${ctx.replace(/\n/g,'<br/>')}
          </p>
        </div>
        `
      });
      $('.task_info').empty().append(list)
    }
  </script>
</body>

</html>